<template>
    <div class="layout">
        <div class="left">
            <div class="title">
                账号注册
            </div>
            <form @submit.prevent="handleSubmit_res">
                <div class="left-up">
                    <div class="form-item">
                        <label for="stuOrgName">注册学生组织名称：</label>
                        <input id="stuOrgName" v-model="stuOrg.stuOrgName" type="text" required placeholder="请输入学生组织名称">
                    </div>
                    <div class="form-item">
                        <label for="stuOrgId">注册学生组织ID：</label>
                        <input id="stuOrgId" v-model.number="stuOrg.stuOrgId" type="text" required
                            placeholder="请输入学生组织ID">
                    </div>
                </div>
                <div class="left-middle">
                    <div class="form-item">
                        <label for="bAdminId">b级管理员ID：</label>
                        <input id="bAdminId" v-model="stuOrg.badminId" type="text" required placeholder="请输入b级管理员ID">
                    </div>
                    <div class="form-item">
                        <label for="cAdminId">c级管理员ID：</label>
                        <input id="cAdminId" v-model="stuOrg.cadminId" type="text" required placeholder="请输入c级管理员ID">
                    </div>
                    <div class="form-item">
                        <label for="applicantId">申请人ID：</label>
                        <input id="applicantId" v-model.number="stuOrg.applicantId" type="text" required
                            placeholder="请输入申请人ID">
                    </div>
                </div>
                <button type="submit">
                    提交
                </button>
            </form>
            <div class="left-down">
                <h1 class='title'>已注册学生组织列表</h1>
                <div class="table">
                    <div class="table-item" v-for="item in registeredStudents" :key="item">
                        {{ item.stuName }}----{{ item.stuId }}
                    </div>
                </div>
            </div>
        </div>
        <div class="middle">
            <div class="title">
                账号注销
            </div>
            <form @submit.prevent="handleSubmit_logout">
                <div class="form-itme">
                    <label for="id">注销学生组织ID：</label>
                    <input id="id" v-model.number="stuOrg.stuOrgId" type="text" required placeholder="请输入学生组织ID">
                </div>
                <button type="submit">提交</button>
            </form>
        </div>
        <div class="right">
            <div class="title">
                账号密码修改
            </div>
            <form @submit.prevent="handleSubmit_passwordchange">
                <div class="form-item">
                    <label for="id">密码修改学生组织ID：</label>
                    <input id="id" v-model.number="stuOrg.stuOrgId" type="text" required placeholder="请输入学生组织ID">
                </div>
                <button type="submit">
                    提交
                </button>
            </form>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

const stuOrg = ref({
    stuOrgName: '',
    stuOrgId: null,
    badminId: null,
    cadminId: null,
    applicantId: null
})

const handleSubmit_res = async () => {
    console.log('提交学生组织负责人账号注册表单');
    try {
        // 获取当前管理员id
        const adminId = localStorage.getItem('adminId');
        // 获取创建者id（申请人ID）
        const creatorId = stuOrg.value.applicantId;
        // 构造学生组织对象
        const org = {

            name: stuOrg.value.stuOrgName,
            orgId: stuOrg.value.stuOrgId,
            badminId: stuOrg.value.badminId,
            cadminId: stuOrg.value.cadminId

        };
        console.log('创建的学生组织对象:', org);
        // 发送POST请求
        const response = await axios.post(
            `http://localhost:8080/admin/${creatorId}/${adminId}/createOrg`,
            org
        );
        if (response.data && response.data.code === 200) {
            // 成功提示
            ElMessage.success('学生组织账号注册成功');
            // 清空表单
            stuOrg.value.stuOrgName = '';
            stuOrg.value.stuOrgId = null;
            stuOrg.value.badminId = null;
            stuOrg.value.cadminId = null;
            stuOrg.value.applicantId = null;
        } else {
            ElMessage.error(response.data.msg || '学生组织账号注册失败');
        }
    } catch (error) {
        ElMessage.error('网络错误或服务器异常');
    }
};

const handleSubmit_logout = async () => {
    console.log('提交学生组织账号注销表单');
    try {
        // 获取当前管理员id
        const adminId = localStorage.getItem('adminId');
        // 获取要注销的学生组织ID
        const orgId = stuOrg.value.stuOrgId;
        // 发送请求
        const response = await axios.delete(
            `http://localhost:8080/admin/${orgId}/${adminId}/deleteOrg`
        );
        if (response.data && response.data.code === 200) {
            ElMessage.success('学生组织账号注销成功');
            // 清空表单
            stuOrg.value.stuOrgId = null;
        } else {
            ElMessage.error(response.data.msg || '学生组织账号注销失败');
        }
    } catch (error) {
        ElMessage.error('网络错误或服务器异常');
    }
};
const handleSubmit_passwordchange = async () => {
    console.log('提交学生组织账号密码修改表单');
    try {
        // 获取当前管理员id
        const adminId = localStorage.getItem('adminId');
        // 获取要重置密码的学生组织ID
        const orgId = stuOrg.value.stuOrgId;
        // 发送PUT请求
        const response = await axios.put(
            `http://localhost:8080/admin/${orgId}/setOrgPassword`,
            adminId, // 直接传操作者ID字符串
            {
                headers: {
                    'Content-Type': 'application/json'
                }
            }
        );
        if (response.data && response.data.code === 200) {
            ElMessage.success('学生组织密码重置成功');
            stuOrg.value.stuOrgId = null;
        } else {
            ElMessage.error(response.data.msg || '学生组织密码重置失败');
        }
    } catch (error) {
        ElMessage.error('网络错误或服务器异常');
    }
};
</script>
<style lang='scss' scoped>
.layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    padding: 40px 0;
    background: linear-gradient(120deg, #e0eafc 0%, #cfdef3 100%);
    min-height: 100vh;

    .left,
    .middle,
    .right {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 4px 16px rgba(90, 169, 233, 0.13);
        padding: 32px 28px 28px 28px;
        width: 340px;
        min-height: 440px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: box-shadow 0.2s;

        &:hover {
            box-shadow: 0 12px 32px rgba(90, 169, 233, 0.22);
        }

        .title {
            font-size: 25px;
            font-weight: bold;
            color: #357ab8;
            margin-bottom: 26px;
            letter-spacing: 2px;
            text-align: center;
        }

        form {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 22px;

            .left-up,
            .left-middle {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 18px;
            }

            .form-item,
            .form-itme {
                display: flex;
                flex-direction: column;
                gap: 8px;

                label {
                    font-size: 17px;
                    color: #357ab8;
                    font-weight: 500;
                }

                input,
                select {
                    padding: 12px;
                    border: 1.5px solid #bcdffb;
                    border-radius: 7px;
                    font-size: 17px;
                    background: #f7fbfe;
                    transition: border 0.2s;

                    &:focus {
                        border-color: #5ba9e9;
                        outline: none;
                        background: #fff;
                    }
                }

                select {
                    cursor: pointer;
                }
            }

            button[type="submit"] {
                margin-top: 10px;
                padding: 12px 0;
                background: linear-gradient(90deg, #5ba9e9 0%, #357ab8 100%);
                color: #fff;
                border: none;
                border-radius: 7px;
                font-size: 18px;
                font-weight: bold;
                cursor: pointer;
                box-shadow: 0 2px 8px rgba(90, 169, 233, 0.10);
                transition: background 0.2s, box-shadow 0.2s;

                &:hover {
                    background: linear-gradient(90deg, #357ab8 0%, #5ba9e9 100%);
                    box-shadow: 0 4px 16px rgba(90, 169, 233, 0.18);
                }
            }
        }

        .left-down {
            width: 100%;
            margin-top: 32px;

            .title {
                font-size: 20px;
                color: #357ab8;
                margin-bottom: 18px;
                text-align: center;
            }

            .table {
                .table-item {
                    background: #f7fbfe;
                    margin-bottom: 10px;
                    padding: 12px;
                    border-radius: 5px;
                    font-size: 16px;
                    color: #444;
                    box-shadow: 0 1px 3px rgba(90, 169, 233, 0.04);
                }
            }
        }
    }
}
</style>